<template>
	<view class="start">
		<image class="homeBg" src="../../static/image/home/homeBg.png" mode="aspectFill"></image>
		<view class="btns">
			<view class="btn normal" @click="next('normal')">普通版</view>
			<view class="btn love" @click="openVideoAd('advanced')">
				<image src="../../static/image/ad.png" class="adPng"></image>进阶版
			</view>
			<view class="btn senior" @click="openVideoAd('senior')">
				<image src="../../static/image/ad.png" class="adPng"></image>高级版
			</view>
		</view>
		<view class="contact" @click="contact">点这联系我</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message type="success" message="留言提交成功!请耐心等待回复" :duration="3000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup2">
			<view class="popup-content2">
				<view class="btns2">
					<view class="btnLeft btn" @click="closePop">取消</view>
					<view class="btnRight btn" @click="closePop">关闭</view>
				</view>
				<view class="tit" @click="copy()">联系我：wx1710408238</view>
				<view class="tit" style="margin-top: 60rpx;">建议反馈 <view class="submit" @click="submit">提交</view>
				</view>
				<view class="image">
					<uni-easyinput type="textarea" maxlength="-1" v-model="feedback"
						placeholder="请输入建议反馈,如需回复请留下联系方式"></uni-easyinput>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoAd: "",
				type: "",
				feedback: '',
			};
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '情侣飞行棋',
				path: '/pages/start/start'
			}
		},
		onLoad() {
			// #ifdef MP

			this.adLoad()

			// #endif
		},
		methods: {
			submit() {
				var that = this;
				uniCloud.callFunction({
					name: "qinglvFeedback",
					data: {
						type: 'add',
						openId: that.openId,
						data: {
							"feedback": that.feedback
						}
					},
					success(res) {
						console.log('resres', res.result)
						that.feedback = '';
						that.$refs.message.open()
						that.$refs.popup2.close()
					}
				})
			},
			copy() {
				uni.setClipboardData({
					data: 'wx1710408238',
					success: function() {
						//调用方法成功
						uni.showToast({
							title: '微信号已复制',
							duration: 2000
						});
						console.log('success');
					}
				})
			},
			closePop() {
				this.$refs.popup2.close()
			},
			contact() {
				this.$refs.popup2.open('bottom')
			},
			next(type) {
				uni.navigateTo({
					url: '/pages/index/index?type=' + type
				});
			},
			adLoad() {
				if (wx.createRewardedVideoAd) {
					this.videoAd = wx.createRewardedVideoAd({
						adUnitId: "adunit-e3c17f070297adc2" //你的广告key
					})
					this.videoAd.onError(err => {})
					this.videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							//这里写广告播放完成后的事件
							this.next(this.type)
						} else {
							// this.next(this.type)
						}
					})
				}
			},
			openVideoAd(type) {
				this.type = type;
				if (this.videoAd) {
					this.videoAd.show().catch(err => {
						// 失败重试
						// console.log("广告拉去失败")
						this.videoAd.load().then(() => videoAd.show())
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.popup-content2 {
		height: 50vh;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f8f8f8;
		padding: 30rpx;
		box-sizing: border-box;

		.tit {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 40rpx;

			.submit {
				float: right;
				color: #f6a3cd;
			}
		}

		.image {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.btns2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 60rpx;

			.btn {
				font-size: 28rpx;
			}

			.btnLeft {
				color: #f6a3cd;
			}
		}
	}

	.contact {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		color: #f491b4;
		font-size: 28rpx;
	}

	.start {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.homeBg {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
		}

		.btns {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.btn {
				letter-spacing: 6rpx;
				font-size: 44rpx;
				text-align: center;
				font-weight: bold;
				width: 480rpx;
				height: 120rpx;
				line-height: 120rpx;
				color: #fff;
				border-radius: 20rpx;
				border: 1px solid #fff;
				margin-bottom: 40rpx;
				position: relative;

				&.normal {
					background-image: linear-gradient(45deg, #816080, #bdaee2);
				}

				&.love {
					background-image: linear-gradient(45deg, #7e5dd5, #d365c9);
				}

				&.senior {
					background-image: linear-gradient(45deg, #d68166, #cea44b);
				}

				.adPng {
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					width: 50rpx;
					height: 50rpx;
					padding: 6rpx;
					box-shadow: 0 0 6rpx 4rpx #fff;
					box-sizing: border-box;
					border-radius: 50%;
					background-image: linear-gradient(45deg, #bf5fff, #ff75e8);
				}

			}
		}
	}
</style>